<template>
	<view>
		<view class="fixed top" style="z-index: 998;">
			<view class="abs" :style="{'background-color': bgColor, opacity : bgOpacity}"></view>
			<view class="father z3" :style="style" id="header">
				<view :style="{'min-height' : innerMinHeight + 'px'}">
					<slot></slot>
				</view>
				<!-- <view class="fixAutoNoPd middle" >
					<view class="w60" v-if="isBack"  @tap="kit.goBack()">
						<text class="sIcon-arrowLeft pr10"></text>
						返回
					</view>
					<slot></slot>
				</view> -->
			</view>
			
			<slot name="bottom"></slot>
			
			<view class="abs flex white" v-if="!!title" :style="titleStyle">
				<view class="text-center fz15" style="width: 100%;">
					{{title}}
				</view>
			</view>
			
		</view>
		
		<view v-if="needHolder" :style="{height:height+'px'}"></view>
	</view>
</template>

<script>
	export default {
		name: "headerBar",
		props: {
			bgColor : {
				default : "#3385ff"
			},
			title : {
				default : ""
			},
			needHolder: {
				type: [Boolean, String],
				default: true
			},
			isBack: {
				type: [Boolean, String],
				default: false
			},
			scrollTop : { 
				default : -1
			},
			scollBg:{ //背景随着滚动透明度渐变还是整体随着滚动渐变
				default : true
			},
		},
		
		computed:{
			
			titleStyle() {
				var paddingTop = this.getPaddingTop();
				var paddingBottom = this.getPaddingBottom();
				var minHeight = this.getMinHeight();
				var paddingLeft = this.getPaddingLeft();
				var style = `padding:${paddingTop}px ${paddingLeft}px ${paddingBottom}px ${paddingLeft}px;min-height:${minHeight}px;`;
				return style ;
			},
			
			style() {
				var paddingTop = this.getPaddingTop();
				var paddingRight = this.getPaddingRight();
				var paddingLeft = this.getPaddingLeft();
				var paddingBottom = this.getPaddingBottom();
				var minHeight = this.getMinHeight();
				var style = `padding:${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px;min-height:${minHeight}px;`;
				return style ;
			},
			
			opacity (){
				if (this.scollBg) {
					return 1 ;
				}
				return this.scrollOpacity();
			},
			
			bgOpacity:function(e){
				if (!this.scollBg) {
					return 1 ;
				}
				return this.scrollOpacity();
			},
			
			innerMinHeight:function(e){
				// #ifdef MP-WEIXIN
				let custom = wx.getMenuButtonBoundingClientRect();
				return custom.height ;
				// #endif
				return 20 ;
			},
		},
		
		data() {
			return {
				statusBar : uni.getSystemInfoSync().statusBarHeight ,
				height : 0
			};
		},
		
		mounted() {
			this.computeHeight();
		},
		
		methods :{
			
			scrollOpacity:function(e){
				var scrollTop = this.scrollTop < 30 ? 0 : this.scrollTop ;
				var opacity = this.scrollTop == -1 ? 1 : (scrollTop/150 > 1 ? 1 : scrollTop/150 )  ;
				return opacity ;
			},
			
			computeHeight:function(e){
				if (!this.needHolder) {
					return ;
				}
				var timer = setInterval(e => {
					const query = uni.createSelectorQuery().in(this);
					query.select('#header').boundingClientRect(data => {
						var height = data.height ;
						if (height > 0) {
							this.height = height ;
							clearInterval(timer);
						}
					}).exec();
				},50);
			},
			
			getMinHeight:function(e){
				// #ifdef MP-WEIXIN
				let custom = wx.getMenuButtonBoundingClientRect();
				return custom.bottom + (custom.top - this.statusBar) ;
				// #endif
				return 50 ;
			},
			
			getPaddingTop:function(e){
				// #ifdef MP-WEIXIN
				let custom = wx.getMenuButtonBoundingClientRect();
				console.log(custom , this.statusBar);
				return custom.top ;
				// #endif
				return this.statusBar + 15 ;
			},
			
			getPaddingBottom:function(e){
				// #ifdef MP-WEIXIN
				let custom = wx.getMenuButtonBoundingClientRect();
				return custom.top - this.statusBar ;
				// #endif
				return 15 ;
			},
			
			getPaddingRight:function(e){
				// #ifdef MP-WEIXIN
				let custom = wx.getMenuButtonBoundingClientRect();
				var pr = uni.getSystemInfoSync().windowWidth - custom.left + ( uni.getSystemInfoSync().windowWidth - custom.right) ;
				return pr ;
				// #endif
				return 15 ;
			},
			
			getPaddingLeft:function(e){
				// #ifdef MP-WEIXIN
				// let custom = wx.getMenuButtonBoundingClientRect();
				// return uni.getSystemInfoSync().windowWidth - custom.right ;
				// #endif
				return 15 ;
			},
		}
	}
</script>

